<template>
	<div class="foSi14" style="padding-top: 30px;">
		<div class="mar" style="width: 840px;">
			<div class="wid100 item-l item-p dis disAl disJuB hei44 mar-bott5">
				<div>短信套餐</div>
				<div>{{ message_num }}条短信套餐</div>
			</div>
			<div class="wid100 item-l item-p dis disAl disJuB hei44 mar-bott5">
				<div>原价(元)</div>
				<div style="color: #787878;text-decoration: line-through;">￥{{ old_price }}</div>
			</div>
			<div class="wid100 item-l item-p dis disAl disJuB hei44 mar-bott5">
				<div>实付(元)</div>
				<div style="color: #f49352;">￥{{ price }}</div>
			</div>
			<div class="wid100 item-l item-p dis disAl disJuB hei44 mar-bott5">
				<div>付款方式</div>
				<div class="dis disAl">
					<svg-icon icon-class="wechat" class="mar0"
						style="width: 20px;height: 20px;fill: green;color: green" />
					<span>微信</span>
				</div>
			</div>
			<div class="dis disAl disJuC mar-top30">
				<div class="que cuPo coFFF" style="background: #41c3a8;" @click.stop="createorder">去支付</div>
			</div>
			<div v-if="zhufu">
				<div class="dis disAl disJuB mar mar-top30" style="width: 408px;">
					<div class="qrcode-box">
						<img :src="pay_ewm" class="wh100" v-if="!payok">
						<div v-if="payok" style="text-align: center;color: green;line-height: 150px;font-size: 24px;">支付成功</div>
					</div>
					<div class="hei60 dis coFFF borRad5" style="padding: 15px 20px;width: 180px;background: #41c3a8;">
						<svg-icon icon-class="svg-scan" class="mar0" style="width: 30px;height: 30px;fill: #fff;" />
						<span class="mar-left10" style="line-height: 1.2;display: inline-block;">请使用微信扫码<br>二维码完成支付</span>
					</div>
					
				</div>
				
				<div class="mar-top20 textCen foSi13" 
					style="color: #f5934b;">请在3分钟内支付，支付成功前请勿离开此页面，可能存在延迟到账，延迟不会超过30秒</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getXuan,
		judgeButton
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex'
	import {
		CreateOrder,
		setmenu,
		getPayinfo
	} from '@/api/sms'
	export default {
		name: 'SmsBuy',
		components: {},
		data() {
			return {
				list: null,
				id: null,
				zhufu: false,
				price: '',
				message_num: '',
				old_price: '',
				pay_ewm: '',
				timer: null,
				payok: false
			
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var query = this.$route.query
			this.id = query.id
			this.price = query.price
			this.message_num = query.message_num
			this.old_price = query.old_price
			var xuanList = [{
				name: '充值',
				url: '/sms/smsBuy',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getList()
		},
		beforeDestroy() {
		    clearTimeout(this.timer);
		},
		methods: {
			createorder() {
				var that = this
				that.zhufu = true
				var data = {
					menuid: that.id
				}
				CreateOrder(data).then(response => {
					const {
						data
					} = response
					that.pay_ewm = data.payewm
					that.orderid = data.orderid
					that.timer = setInterval(function() {
						that.getPayinfo()
					}, 2000)
				}).catch(error => {
					console.log(error)
				})
			},
			getPayinfo() {
				var that = this
				var data = {
					orderid: that.orderid
				}
				getPayinfo(data).then(response => {
					const {
						data
					} = response
					if(data === 1){
						that.$message.success('支付成功');
						clearTimeout(that.timer);
						that.payok = true;
					}
				}).catch(error => {
					console.log(error)
				})
			},
			getList() {
				this.list = []
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		padding: 30px 0;
		color: #787878;
	}

	.list {
		float: left;
		width: 158px;
		height: 208px;
		padding: 15px;
		margin-right: 52px;
		margin-bottom: 30px;
		-o-box-sizing: border-box;
		box-sizing: border-box;
		border: 4px solid #e6e6e6;
		border-radius: 2px;
		text-align: center;
	}

	.num {
		color: #41c3a8;
		font-size: 40px;
		height: 50px;
		overflow: hidden;
	}

	.text {
		color: #41c3a8;
	}

	.separator {
		height: 2px;
		background: #e3e3e3;
		margin: 15px 0 8px;
	}

	.price {
		color: #f49352;
		font-size: 16px;
	}

	.sms-buy {
		display: block;
		height: 40px;
		margin-top: 15px;
		background: #f49352;
		color: #fff;
		text-align: center;
		line-height: 40px;
		border-radius: 2px;
	}

	.qrcode-box {
		width: 176px;
		height: 176px;
		padding: 12px;
		background: #f4f4f7;
	}
</style>